<div class="flex items-stretch space-x-2 whitespace-nowrap">
  <form class="flex-grow">
    <input
      class="wsl-input-field"
      type="search"
      placeholder="{{ filterQueryPlaceholder }}&hellip;"
      autocomplete="off"
      name="rowFilter"
      id="rowFilter"
      (keyup)="onKeyupRowFilter($event)"
      [value]="filterQueryValue" />
  </form>
  <div wslDropdown>
    <button
      class="wsl-btn-sm wsl-btn-muted wsl-dropdown-toggle flex h-full items-center space-x-1"
      type="button"
      id="dropdown-button-filter"
      aria-haspopup="true"
      aria-expanded="false">
      <span>Filter:</span>
      <b class="font-medium">{{ filterName }}</b>
      <ng-icon name="heroChevronDown" class="opacity-50" />
    </button>
    <ul
      class="wsl-dropdown-menu hidden w-48"
      aria-labelledby="dropdown-button-filter">
      <li
        *ngFor="let filter of filters"
        (click)="filterName = filter.key"
        class="wsl-dropdown-item">
        {{ filter.name }}
      </li>
    </ul>
  </div>
  <div wslDropdown>
    <button
      class="wsl-btn-sm wsl-btn-muted wsl-dropdown-toggle flex h-full items-center space-x-1"
      type="button"
      id="dropdown-button-sort"
      aria-haspopup="true"
      aria-expanded="false"
      [disabled]="isSearchActive()">
      <span>Sort:</span>
      <b class="font-medium">{{ sorterName }}</b>
      <ng-icon name="heroChevronDown" class="opacity-50" />
    </button>
    <ul
      class="wsl-dropdown-menu hidden w-48"
      aria-labelledby="dropdown-button-sort">
      <li
        *ngFor="let sorter of sorters"
        (click)="sorterName = sorter.key"
        class="wsl-dropdown-item">
        {{ sorter.name }}
      </li>
    </ul>
  </div>
  <div>
    <button
      (click)="sortOrderToggle()"
      [disabled]="isSearchActive()"
      class="wsl-btn-sm wsl-btn-muted h-full">
      <fa-icon [icon]="sortOrderIcon"></fa-icon>
    </button>
  </div>
</div>
<ng-container>
  <div
    *ngIf="bottomView === 'reset'"
    class="mt-4 flex items-center justify-between">
    <p class="text-sm text-black dark:text-gray-300"></p>
    <button (click)="clearFilters()" class="wsl-btn-sm wsl-btn-muted">
      <span>Reset View</span>
    </button>
  </div>
  <div
    *ngIf="bottomView === 'clear'"
    class="mt-4 flex items-center justify-between">
    <p class="text-sm text-black dark:text-gray-300">
      <b>{{ stats.totalUnpaginatedRows }}</b>
      of
      <b>{{ stats.totalRows }}</b>
      rows match this filter.
    </p>
    <button (click)="clearFilters()" class="wsl-btn-sm wsl-btn-muted">
      <span>Clear Filters</span>
    </button>
  </div>
  <div
    *ngIf="bottomView === 'full'"
    class="mt-4 flex items-center justify-center border border-gray-200 bg-gray-100 p-2 dark:border-gray-700 dark:bg-gray-800"
    style="min-height: 20vh">
    <div
      class="flex flex-col space-y-4 text-center text-sm text-black dark:text-gray-300">
      <p>
        {{
          stats.totalRows
            | i18nPlural
              : {
                  '=0': 'This page appears to have no result.',
                  '=1': 'The row in this list does not match the specified filter.',
                  other:
                    'None of the # rows in this list matches the specified filter.'
                }
        }}
      </p>
      <div *ngIf="stats.totalRows !== 0">
        <button (click)="clearFilters()" class="wsl-btn-sm wsl-btn-primary">
          <span>Clear Filters</span>
        </button>
      </div>
    </div>
  </div>
</ng-container>
